<template>
    <v-data-table
            :headers="headers"
            :items="desserts"
            sort-by="calories"
            class="elevation-1"
            :search="search"
            v-loading="loading"
    >
        <template v-slot:top>
            <v-toolbar
                    flat
            >
                <v-divider
                        class="mx-4"
                        inset
                        vertical
                ></v-divider>
                <v-spacer></v-spacer>
                <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="搜索"
                        single-line
                        hide-details
                ></v-text-field>
                <v-dialog
                        v-model="dialog"
                        max-width="500px"
                >
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn
                                color="primary"
                                dark
                                class="mb-2"
                                v-bind="attrs"
                                v-on="on"
                        >
                            添加
                        </v-btn>

                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="text-h5">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.id"
                                                label="id"
                                                :disabled="true"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.name"
                                                label="姓名"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.categoryName"
                                                label="类别"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.tags"
                                                label="标签"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.status"
                                                label="状况"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.isBuyText"
                                                label="售卖情况"
                                        ></v-text-field>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="close"
                            >
                                取消
                            </v-btn>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="save"
                            >
                                确定
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="dialogDelete" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">你真的想删掉吗</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                            <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
        </template>
        <template v-slot:item.categoryName="{ item }">
            <v-chip
                    :color="getColor(item.categoryName)"
                    dark
            >
                {{ item.categoryName }}
            </v-chip>
        </template>

        <template v-slot:item.actions="{ item }">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(item)"
            >
                mdi-pencil
            </v-icon>
            <v-icon
                    small
                    @click="deleteItem(item)"
            >
                mdi-delete
            </v-icon>
        </template>
        <template v-slot:no-data>
            <v-btn
                    color="primary"
                    @click="initialize"
            >
                重置
            </v-btn>
        </template>
    </v-data-table>
</template>

<script>
   import * as pet from '../../api/pet.js'
   import { Message} from 'element-ui'
    export default {
        data: () => ({
            dialog: false,
            dialogDelete: false,
            search: '',
            headers: [
                {
                    text: 'id',
                    align: 'start',
                    sortable: true,
                    value: 'id',
                },
                { text: '类别', value: 'categoryName' },
                { text: '姓名', value: 'name' },
                { text: '标签', value: 'tags' },
                { text: '状况', value: 'status' },
                { text: '售卖情况', value: 'isBuyText' },
                { text: '操作', value: 'actions', sortable: false },
            ],
            desserts: [],
            editedIndex: -1,
            loading: true,
            editedItem: {
                id: 0,
                categoryName: "",
                name: "",
                tags: "",
                status: "",
                isBuyText: ""
            },
            defaultItem: {
                id: 0,
                categoryName: "",
                name: "",
                tags: "",
                status: "",
                isBuyText: ""
            },
        }),

        computed: {
            formTitle () {
                return this.editedIndex === -1 ? '添加' : '编辑'
            },
        },

        watch: {
            dialog (val) {
                val || this.close()
            },
            dialogDelete (val) {
                val || this.closeDelete()
            },
            // eslint-disable-next-line no-unused-vars
            $route: {
                // eslint-disable-next-line no-unused-vars
                handler: function(val){
                    this.initialize();
                }
            }
        },

        created () {
            this.initialize()
        },

        methods: {
            initialize () {
                this.loading=true;
                let that=this
                pet.getPets().then(function (response) {
                    that.desserts = response.data.data
                })
                this.loading=false

            },
            getColor (categoryName) {
                if (categoryName ==="猫咪") return 'red'
                else if (categoryName ==="小狗") return 'orange'
                else return 'green'
            },

            editItem (item) {
                this.editedIndex = this.desserts.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialog = true
            },

            deleteItem (item) {
                this.editedIndex = this.desserts.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialogDelete = true
            },

            async deleteItemConfirm () {
                let that =this
                await  pet.deletePet(this.editedItem).then(function (response) {
                   that.$store.commit('updateCode',response.data.code)
                 })
                if(this.$store.getters.getState===200) {
                    this.desserts.splice(this.editedIndex, 1)
                }
                this.closeDelete();

            },

            close () {
                this.dialog = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })

            },

            closeDelete () {
                this.dialogDelete = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },

            async save () {
                let that = this
                if (this.editedIndex > -1) {
                    await pet.updatePet(this.editedItem).then(function (response) {
                        that.$store.commit('updateCode',response.data.code)
                    })
                    if(this.$store.getters.getState===200) {
                        Object.assign(this.desserts[this.editedIndex], this.editedItem);
                    }else if(this.$store.getters.getState===400){
                        Message.error("所填的参数不正确")
                    }

                } else {
                    await pet.addPet(this.editedItem).then(function (response) {
                        that.$store.commit('updateCode',response.data.code)
                    })
                    if(this.$store.getters.getState===200) {
                        this.desserts.push(this.editedItem);
                    }
                }
                this.close();

            },
        },
    }
</script>

<style scoped>

</style>
